import React from 'react';
import {Form, Input, Button, Select, Table, Modal, Popover, Pagination, Message, Icon, DatePicker  } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

let List = React.createClass({

  getInitialState() {
    return {
      visible: false,
      data: [],
      forms: {},
      paramData: [],
      roomId: '',
      pagination: {
        current: 1,
        pageSize: 5
      }
    }
  },

  componentWillReceiveProps(nextProps) {
    let pager = this.state.pagination;
    this.setState({
      visible: nextProps.visible,
      roomId: nextProps.roomId,
      data: [],
      pagination: pager,
    })
    if (nextProps.visible) {
      this.fetch(nextProps.roomId);
    }
  },


  fetch(param) {
    let forms = this.state.forms;
    let id = {roomId: param ? param : this.state.roomId};
    let page = this.state.pagination.current;
    let params = Object.assign({}, {pageSize: 5, currentPage: page}, forms, id);
    let _me = this;
    Utils.sendAjax({
      url: '/room/meter/record',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  handleTableChange(pagination) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch();
  },

  handleCancel() {
    this.props.callHide();
    this.handleReset();
    const pager = this.state.pagination;
    pager.current = 1;
    this.setState({
      data: [],
      pagination: pager
    })
  },

  handleSearch() {
    this.setState({
      pagination: {
        current: 1
      }
    })
    this.fetch();
  },

  handleReset() {
    this.setState({
      forms: {
        costTypeId : '',
        startTime: null,
        endTime: null,
      }
    });
  },

  rowKey(data) {
    return data.id;
  },

  handleChange(filed, val) {

    let newStr = this.state.forms;
    let name = filed;
    let value = filed == 'meterType' ? val : Utils.formatDate(val);
    newStr[name] = value;
    this.setState({
      forms: newStr
    })
    console.log(newStr);
  },

  render() {

    const { getFieldProps } = this.props.form;

    const columns = [
      {
        title: '抄表日期',
        dataIndex: 'scaleTime'
      }, {
        title: '抄表内容',
        dataIndex: 'meterTypeStr'
      }, {
        title: '抄表刻度',
        dataIndex: 'scale'
      }];

    return (
      <Modal title="抄表记录" visible={this.state.visible} width={800}
             onCancel={this.handleCancel} footer="">
        <div className="search-bar"  style={{marginBottom: 20}}>
          <Form inline>
            <FormItem  label="抄表内容">
              <Select  value={this.state.forms.meterType ? this.state.forms.meterType : '0'} onChange={this.handleChange.bind(this, 'meterType')} placeholder="抄表内容" style={{width: 100}}>
                <Option  value="0">全部</Option>
                <Option  value="1">水费</Option>
                <Option  value="2">电费</Option>
                <Option  value="3">天然气费</Option>
              </Select>
            </FormItem>
            <FormItem  label="抄表日期">
              <DatePicker value={this.state.forms.startTime} onChange={this.handleChange.bind(this, 'startTime')} />&nbsp;至&nbsp;
              <DatePicker value={this.state.forms.endTime} onChange={this.handleChange.bind(this, 'endTime')} />
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
              <Button type="default" onClick={this.handleReset} >重置</Button>
            </FormItem>
          </Form>
        </div>
        <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
               onChange={this.handleTableChange}
               pagination={ this.state.pagination }/>
      </Modal>
    );
  }
});
List = Form.create()(List)
export default List